<template>
  <div class="reply-comments">
    <reply-comments-item
      v-for="(item, index) in list"
      :key="index"
      :info="item"
      :index="index"
      @reply="reply"
    ></reply-comments-item>
  </div>
</template>

<script>
import ReplyCommentsItem from './ReplyCommentsItem.vue';

export default {
  name: 'ReplyComments',
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    ReplyCommentsItem
  },
  data() {
    return {
      lastIndex: -1
    };
  },
  methods: {
    reply(index) {
      // 说明不是第一次打开，先关闭上一个回复窗口
      if (this.lastIndex !== -1) {
        this.list[this.lastIndex].showReply = false;
      }
      this.lastIndex = index;
      if ('showReply' in this.list[index]) {
        this.list[index].showReply = true;
      } else {
        this.$set(this.list[index], 'showReply', true);
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .reply-comments {
    border: 1px solid #ddd;
    border-top: 0;
  }
</style>
